{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datetimepicker_css'
    '@jqgird_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <form action="javascript:search()" method="post" id="searchForm">
        <div class="widget-container-col">
            <div class="widget-box">
                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <table class="table table-bordered table-hover no-padding">
                            <tbody>
                            <tr>
                                <td colspan="4" class="text-center line-height-0 align-middle">

                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(1)">{{ 'Yesterday'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(2)">{{ 'Today'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(3)">{{ 'Last Week'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(4)">{{ 'This Week'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(5)">{{ 'Last Month'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(6)">{{ 'This Month'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(7)">{{ 'This Year'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(8)">{{ 'Last Year'|trans }}</button>
                                    <audio id="sound_player" style="color: white;margin-left: 10px" autoplay="autoplay" controls="controls"class="align-middle">
                                        {{ 'Your browser does not support this player!'|trans }}
                                    </audio>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle">
                                    <label for="ag_num">{{ 'Agent'|trans }}:</label>
                                </td>
                                <td class="col-xs-4">
                                    <input type="text" id="ag_num" placeholder="" class="input-sm width-30">
                                </td>
                                <td class="col-xs-2 align-right align-middle">
                                    <label for="evaluate">{{ 'Evaluate Result'|trans }}:</label>
                                </td>
                                <td class="col-xs-4">
                                    <select id="evaluate" class="input-sm width-30">
                                        <option value="-5">{{ 'All'|trans }}</option>
                                        {% for key,evaluate in evaluate %}
                                            <option value="{{ key }}">{{ evaluate }}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle">
                                    <label for="ag_phone">{{ 'Agent Phone'|trans }}:</label>
                                </td>
                                <td class="col-xs-4">
                                    <input type="text" id="ag_phone" placeholder="" class="input-sm width-30">
                                </td>
                                <td class="col-xs-2 align-right align-middle">
                                    <label for="cus_phone">{{ 'Cus Phone'|trans }}:</label>
                                </td>
                                <td class="col-xs-4">
                                    <input type="text" id="cus_phone" placeholder="" class="input-sm width-30">
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle">
                                    <label for="start_time">{{ 'Start time'|trans }}:</label>
                                </td>
                                <td class="col-xs-4">
                                    <input type="text" id="start_time" placeholder="" value="{{ date.today.start }}" class="input-sm width-30" >
                                </td>
                                <td class="col-xs-2 align-right align-middle">
                                    <label for="end_time">{{ 'End time'|trans }}:</label>
                                </td>
                                <td class="col-xs-4">
                                    <input type="text" id="end_time" placeholder="" value="{{ date.today.end }}" class="input-sm width-30" >
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-center">
                                    <button id="loading-btn" type="submit" class="btn btn-info btn-sm">
                                        <i class="ace-icon fa fa-search"></i> {{ 'Inquiry'|trans }}
                                    </button>
                                    <button id="loading-btn" type="button" class="btn btn-pink btn-sm" onclick="resetBtn()">
                                        <i class="ace-icon fa fa-undo"></i> {{ 'Reset'|trans }}
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@datetimepicker_js'
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
    $('#start_time').datetimepicker({
        autoclose:1,
        startView: 'month',
        minView:'hour',
        todayBtn:  1,
        format:'yyyy-mm-dd hh:ii:ss'
    });

    $('#end_time').datetimepicker({
        autoclose:1,
        startView: 'month',
        minView:'hour',
        todayBtn:  1,
        format:'yyyy-mm-dd hh:ii:ss'
    });

    jQuery(function($) {
        {{ gridWidth() }}
        jQuery(grid_selector).jqGrid({
            caption: "{{ 'Evaluate Report'|trans }}",
            url: "{{ path('icsoc_report_evaluate_list') }}",
            mtype: 'POST',
            datatype: "json",
            hidegrid:false,
            postData: {param:jsonToString(getCondition())},
            colModel:[
                {name:'',index:'',width:100,label:'',align:'center', fixed:true,editable:true, sortable:false,formatter:function(cellvalue,options,rowBject){
                    return "<a onclick='listen(\""+rowBject.record_file+"\")' class='pointer'>[收听]</a><a onclick='downSound(\""+rowBject.record_file+"\")' class='pointer'>[下载]</a>";
                }},
                {name:'ag_num' , index:'ag_num' , label: '{{ 'Agent'|trans }}' , width:120 , sortable:true , frozen:true , fixed:true},
                {name:'ag_phone' , index:'ag_phone' , label: '{{ 'Agent Phone'|trans }}' , width:120 , sortable:true , fixed:true},
                {name:'cus_phone' , index:'cus_phone' , label: '{{ 'Cus Phone'|trans }}' , width:120 , sortable:true , fixed:true},
                {name:'que_name' , index:'que_name' , label: '{{ 'Queue'|trans }}' ,width:120, sortable:true , fixed:true},
                {name:'serv_num' , index:'serv_num' , label: '{{ 'Server Num'|trans }}' , width:120 , sortable:true , frozen:true , fixed:true},
                {name:'call_type' , index:'call_type' , label: '{{ 'Call Type'|trans }}' ,width:120, sortable:true , fixed:true},
                {name:'start_time' , index:'start_time' , label: '{{ 'Start Time'|trans }}' , width:140 , sortable:true , fixed:true},
                {name:'conn_secs' , index:'conn_secs' , label: '{{ 'Detail Conn Secs'|trans }}' , width:80 , sortable:true , fixed:true},
                {name:'evaluate' , index:'evaluate' , label: '{{ 'Evaluate Result'|trans }}' , width:80 , sortable:true , fixed:true}
            ],
            {{ gridConfig() }}
            height: '326',
            rowNum:10,
            rowList: [10,20,30,50,100],
            rownumWidth: 40,
            viewrecords: true,
            sortname:"id",
            sortorder:'desc',
            multiselect: false,
            rownumbers: true
        });
        {{ gridNav(false,false,false,false,true,false) }}
        jQuery(grid_selector).navButtonAdd(
                pager_selector,
                {
                    caption:'{{ 'Export Csv'|trans }}',
                    buttonicon:'ace-icon fa fa-file-excel-o  primary',
                    onClickButton:function() {
                        location.href = "{{ path('icsoc_report_evaluate_list', {'export': 'csv'})|raw }}&param="+jsonToString(getCondition());
                    }
                }
        ).navButtonAdd(
                pager_selector,
                {
                    caption:'{{ 'Export Excel'|trans }}',
                    buttonicon:'ace-icon fa fa-file-excel-o  primary',
                    onClickButton:function() {
                        location.href = "{{ path('icsoc_report_evaluate_list', {'export': 'excel'})|raw }}&param="+jsonToString(getCondition());
                    }
                }
        );
    });

    /**
     * 重置
     */
    function resetBtn()
    {
        $('#searchForm')[0].reset();
        search();
    }

    /**
     * 搜索
     */
    function search()
    {
        $('#grid-table').setGridParam({page:1,postData:{param:jsonToString(getCondition())}}).trigger("reloadGrid");
    }

    /**
     * 获取搜索条件
     */
    function getCondition()
    {
        var $start_time = $('#start_time');
        var $end_time = $('#end_time');

        if (!$start_time.val()) {
            $start_time.parent().parent().addClass('has-error');
            $start_time.focus();
            return;
        }

        if (!$end_time.val()) {
            $end_time.parent().parent().addClass('has-error');
            $end_time.focus();
            return;
        }

        var param = {};

        param.ag_num = $.trim($('#ag_num').val());
        param.evaluate = $('#evaluate').val();
        param.ag_phone =  $.trim($('#ag_phone').val());
        param.cus_phone =  $.trim($('#cus_phone').val());
        param.start_time =  $.trim($('#start_time').val());
        param.end_time =  $.trim($('#end_time').val());

        return param;
    }

    /**
     * 设置时间
     *
     * @param type
     */
    function fnSetTime(type)
    {
        var $start_time = $('#start_time');
        var $end_time = $('#end_time');

        switch (type) {
            case 1:
                $start_time.val('{{ date.yestoday.start }}');
                $end_time.val('{{ date.yestoday.end }}');
                break;
            case 2:
                $start_time.val('{{ date.today.start }}');
                $end_time.val('{{ date.today.end }}');
                break;
            case 3:
                $start_time.val('{{ date.lastweek.start }}');
                $end_time.val('{{ date.lastweek.end }}');
                break;
            case 4:
                $start_time.val('{{ date.thisweek.start }}');
                $end_time.val('{{ date.thisweek.end }}');
                break;
            case 5:
                $start_time.val('{{ date.lastmonth.start }}');
                $end_time.val('{{ date.lastmonth.end }}');
                break;
            case 6:
                $start_time.val('{{ date.thismonth.start }}');
                $end_time.val('{{ date.thismonth.end }}');
                break;
            case 7:
                $start_time.val('{{ date.thisyear.start }}');
                $end_time.val('{{ date.thisyear.end }}');
                break;
            case 8:
                $start_time.val('{{ date.lastyear.start }}');
                $end_time.val('{{ date.lastyear.end }}');
                break;
        }

        search();
    }

    function listen(url)
    {
        $('#sound_player').attr("src", url);
    }

    function downSound(url)
    {
        location.href = url;
    }
    </script>
{% endblock %}